<!-- 
	商品列表组件 
	1、商品列表：商品列表数组
	2、基础设置：组件上边距、组件下边距、组件背景色、背景是否整体式 0 否  1是、背景圆角、单个商品圆角
	3、销售价设置：销售价文字颜色、销售价文案
-->
<template>
	<div :class="className" v-if="list.length > 0">
		<!-- style -->
		<div v-html="css"></div>
		<!-- 列表 -->
		<ul>
			<li v-for="(item, index) in list" :key="`${index}-${item.goodsSn}`">
				<!--商品图片-->
				<div class="item-image">
					<a :href="item.goodsNumber > 0 ? item.urlTitle: 'javascript:void(0);'">
						<div class="image-goods">
							<unit-goods-image :src="item.goodsImg" :sku="item.goodsSn" :index="index" />
						</div>
					</a>
					<!--sold out-->
					<div class="item-soldOut" v-if="item.goodsNumber <= 0">
						<span>{{ languages.soldOut }}</span>
					</div>
				</div>
				<div class="item-info">
					<!--sku标题-->
					<div class="item-title">
						<a
							:href="item.goodsNumber > 0 ? item.urlTitle: 'javascript:void(0);'">{{ item.goodsTitle }}</a>
					</div>
					<div class="item-shop-market">
						<!--销售价-->
						<div class="item-shop bold">
							<div class="shop-title">{{ data.shopPriceTitle }}</div>
							<span class="shop-title-block"></span>
							<div class="shop-price">
								<unit-shop-price :value="item.shopPrice" :config="data">
								</unit-shop-price>
							</div>
						</div>
						<!--市场价-->
						<div class="item-market">
							<unit-market-price :value="item.markePrice" :shop-price="item.shopPrice" :config="data">
							</unit-market-price>
						</div>
					</div>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	// 自定义样式
	const css = function() {
		const {
			marginTop,
			marginBottom,
			bgColor,
			bgRadius,
			itemRadius,
			shopPriceColor
		} = this.data;
		return `
	        .component-${this.id} {
	            padding-top: ${this.px2rem(marginTop)};
	            padding-bottom: ${this.px2rem(marginBottom)};
	            background-color: ${bgColor || '#f8f8f8'};
	        }
	
	        .component-${this.id} ul {
	            border-radius: ${this.px2rem(bgRadius || 12)};
	        }
	
	        .component-${this.id} li {
	            border-radius: ${this.px2rem(itemRadius || 12)};
	        }
	
	        .component-${this.id} .item-shop .shop-price {
	            color: ${shopPriceColor};
	        }
	    `;
	};

	import defaultGoods from '@/static/images/default-goods.png';

	// 默认的商品数据
	const defaultGoodsItem = {
		goodsSn: "269004202",
		goodsTitle: "Asymmetric Striped Slit Shirt Dress - Dark Gree",
		goodsImg: defaultGoods,
		tsk_price: 9.99, // 秒杀价格
		shopPrice: 9.99, // 销售价
		markePrice: 19.99, // 市场价
		discount: 50,
		promotions: [
			'<span>BUY <em class="special fb">1</em> GET 1 <em class="special fb  ml5" data-orgp="">99%</em> OFF</span>',
			'<span>BUY <em class="special fb">1</em> GET 1 <em class="special fb  ml5" data-orgp="">99%</em> OFF</span>'
		]
	};

	// 默认的商品数据列表
	const defaultGoodsList = [
		defaultGoodsItem,
		defaultGoodsItem,
		defaultGoodsItem,
		defaultGoodsItem
	];

	export default {
		name: 'u_goodslist',
		props: {
			componentId: {
				type: String,
				default: ''
			},
			data: {
				type: Object,
				default () {
					return {
						//商品列表数组
						"goods": {
							type: Array,
							default: []
						},
						//组件上边距
						"marginTop": {
							type: Number,
							default: 0
						},
						//组件下边距
						"marginBottom": {
							type: Number,
							default: 0
						},
						//组件背景色
						"bgColor": {
							type: String,
							default: '#f8f8f8'
						},
						//背景是否整体式 0 否  1是
						"boxIsWhole": {
							type: String,
							default: '0'
						},
						//背景圆角
						"bgRadius": {
							type: Number,
							default: '12'
						},
						//单个商品圆角
						"itemRadius": {
							type: Number,
							default: '12'
						},
						///销售价文字颜色
						"shopPriceColor": {
							type: String,
							default: '#333333'
						},
						//销售价文案
						"shopPriceTitle": {
							type: String,
							default: '售价'
						}
					}
				}
			}
		},
		computed: {
			css() {
				return '<style>' + css.call(this) + '</style>';
			},
			className() {
				const name = ['component-wrapper', `component-${this.id}`];
				this.whole && name.push('is-whole');
				return name;
			},
			env() {
				return this.$store.state.decorate.page.env;
			},
			list() {
				if (this.data.goods != null && this.data.goods != undefined && this.data.goods.length > 0) {
					return this.data.goods;
				}
				return defaultGoodsList;
			},
			// 背景整体式
			whole() {
				return this.data.boxIsWhole == 1;
			}
		},
		data() {
			return {

			}
		},
		methods: {
			// rem转换
			px2rem(val = 0) {
				return (val / 75) + 'rem';
			}
		}
	}
</script>

<style lang="less" scoped>
	// 默认
	.component-wrapper {
		display: flex;
		justify-content: center;
		width: 100%;

		ul {
			display: flex;
			justify-content: space-between;
			flex-flow: row wrap;
			margin: 12px 12px 3px;
			padding: 0;
			width: 100%;

			li {
				position: relative;
				width: 48.5%;
				margin-bottom: 9px;
				background-color: #FFFFFF;
				overflow: hidden;
			}

			// 商品图片
			.item-image {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 235px;

				.image-goods img {
					width: 100%;
				}
			}

			// 商品详情
			.item-info {
				padding-left: 12px;
				margin-bottom: 12px;
			}

			// 标题
			.item-title {
				box-sizing: content-box;
				width: 147px;
				font-size: 11px;
				height: 15px;
				line-height: 15px;

				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				word-break: keep-all;
				word-wrap: break-word;

				padding-top: 9px;
				margin-bottom: 4px;
				color: #333333;

				a {
					color: #333333;

					&:hover {
						color: #333333;
					}
				}
			}

			// 销售及市场价
			.item-shop-market {
				width: 100%;
			}

			.item-shop-market .item-shop {
				display: flex;
				flex-flow: row wrap;
				color: #333333;
				line-height: 24px;
				align-items: baseline;

				.shop-title {
					font-size: 13px;
					max-width: 147px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					word-break: keep-all;
					word-wrap: break-word;
				}

				.shop-title-block {
					display: inline-block;
					width: 4px;
				}

				.shop-price {
					font-size: 18px;
					font-weight: bold;
				}
			}

			.item-market {
				color: #999999;
				line-height: 17px;
			}

			// 售空
			.item-soldOut {
				position: absolute;
				top: 91px;
				left: 12px;
				width: 147px;
				height: 30px;
				line-height: 30px;
				border-radius: 40px;
				background-color: #000000;
				opacity: 0.4;
				z-index: 1;

				>span {
					display: block;
					text-align: center;
					font-weight: 600;
					font-size: 12px;
					color: #ffffff;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					word-break: keep-all;
					word-wrap: break-word;
					width: 100%;
				}
			}
		}
	}

	// 整体式
	.component-wrapper.is-whole {
		ul {
			margin: 12px;
			padding: 12px 12px 0px;
			width: 100%;
			background-color: #ffffff;

			li {
				width: 48.5%;
			}

			// 商品图片
			.item-image {
				height: 212px;
			}

			// 商品详情
			.item-info {
				padding-left: 0rem;
			}

			// 售空
			.item-soldOut {
				position: absolute;
				top: 91px;
				width: 135px;
			}
		}
	}
</style>
